<template>
  <div>
    <div class="common-form">活动商品 </div>
    <!-- 3 秒杀  2 拼团 -->
    <el-form-item label="商品管理" prop="tableData" :rules="rulesProduct">
      <el-button icon="Plus" @click="changeProduct(form.tableData)" v-if="!disabled">选择商品</el-button>
      <div class="pt16">
        <el-table :data="form.tableData" row-key="productId" border style="width: 100%">
          <!-- 拼团活动 -->
          <el-table-column type="expand" v-if="form.activityType === 2">
            <template #default="props">
              <!-- <div style="margin: 0px  10px;"></div> -->
              <el-button style="margin:5px 10px" type="primary" size="small"
                @click="addStep(props.row.productId, props.$index)" v-if="!disabled">设置阶梯规则</el-button>
              <div style="width: 90%; margin: 0px  10px">
                <el-table :data="props.row.stepList">
                  <el-table-column :label="form.groupType == 10 ? '人数' : '数量'" prop="eachReachNum" width="150">
                    <template #default="childScope">
                      <el-input-number :disabled="disabled" v-model="childScope.row.eachReachNum" :min="0"
                        :controls="false">
                      </el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="折扣(0.9 = 9折)" prop="discount">
                    <template #default="childScope">
                      <el-input-number :disabled="disabled" v-model="childScope.row.discount" :min="0" :max="100"
                        :controls="false">
                      </el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" prop="cz" fixed="left" width="80" v-if="!disabled">
                    <template #default="childScope">
                      <el-button type="text"
                        @click="deleteSpec(childScope.row, childScope.$index, props.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="expand" v-if="form.activityType === 4">
            <template #default="props">
              <div style="margin: 0px  10px;">批次设置</div>
              <el-button style="margin:5px 10px" type="primary" size="small"
                @click="addBatch(props.row.productId, props.$index)" v-if="!disabled">增加批次</el-button>
              <div style="width: 90%; margin: 0px  10px">
                <el-table :data="props.row.batchList">
                  <!-- <el-table-column label="批次id" prop="seckillProductBatchId" width="100" />
                  <el-table-column label="活动id" prop="seckillActivityId" width="100" />
                  <el-table-column label="秒杀id" prop="seckillProductId" width="100" />
                  <el-table-column label="商品id" prop="productId" width="100" /> -->
                  <el-table-column label="提货时间" prop="batchNo" width="150">
                    <template #default="childScope">
                      <el-date-picker v-model="childScope.row.batchNo" :disabled="disabled" type="date"
                        placeholder="提货时间" size="small" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </template>
                  </el-table-column>
                  <el-table-column label="库存" prop="batchStock">
                    <template #default="childScope">
                      <el-input-number :disabled="disabled" v-model="childScope.row.batchStock" :min="0"
                        :controls="false">
                      </el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" prop="cz" fixed="left" width="80" v-if="!disabled">
                    <template #default="childScope">
                      <el-button type="text"
                        @click="deleteBatch(childScope.row, childScope.$index, props.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="300">
            <template #default="scope">
              <p class="text-ellipsis-2">{{ scope.row.productName }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="spec" label="商品规格" width="280">
            <template #default="scope">{{ scope.row.color }},{{ scope.row.sku }}</template>
          </el-table-column>
          <!-- 库存  价格 满一万价格  满十万价格  最小购买数量  定金比例 库存比例  可编辑 -->
          <el-table-column label="限购数量">
            <template #default="scope">
              <el-input size="small" :disabled="disabled" :class="{ isvalid: scope.row.limitNumValid == true }"
                type="number" min="1" v-model="scope.row.limitNum"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="商品库存总量" width="180" prop="stock">
            <template #default="scope">
              <el-input size="small" :disabled="disabled" :class="{ isvalid: scope.row.limitNumValid == true }"
                type="number" min="1" v-model="scope.row.stock"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="价格" width="100" prop="productPrice">
            <template #default="scope">
              <el-input size="small" :disabled="disabled" :class="{ isvalid: scope.row.limitNumValid == true }"
                type="number" min="1" v-model="scope.row.productPrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="满一万价格" width="130" prop="tenThousandPrice">
            <template #default="scope">
              <el-input size="small" :disabled="disabled" :class="{ isvalid: scope.row.limitNumValid == true }"
                type="number" min="1" v-model="scope.row.tenThousandPrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="满十万价格" width="130" prop="lakhPrice">
            <template #default="scope">
              <el-input size="small" :disabled="disabled" :class="{ isvalid: scope.row.limitNumValid == true }"
                type="number" min="1" v-model="scope.row.lakhPrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="最小购买数量" width="130" prop="minBuyCount">
            <template #default="scope">
              <el-input size="small" :disabled="disabled" :class="{ isvalid: scope.row.limitNumValid == true }"
                type="number" min="1" v-model="scope.row.minBuyCount"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="定金比例" width="130" prop="depositRatio">
            <template #default="scope">
              <el-input size="small" :disabled="disabled" :class="{ isvalid: scope.row.limitNumValid == true }"
                type="number" min="1" v-model="scope.row.depositRatio"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="库存比例" width="130" prop="stockRatio">
            <template #default="scope">
              <el-input size="small" :disabled="disabled" :class="{ isvalid: scope.row.limitNumValid == true }"
                type="number" min="1" v-model="scope.row.stockRatio"></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column label="累计销量" width="180" prop="totalSales"> </el-table-column> -->
          <!-- <el-table-column label="虚拟销量" width="180" prop="salesInitial"> </el-table-column> -->
          <!-- <el-table-column label="参与人数" width="180" prop="joinNum"> </el-table-column> -->
          <el-table-column label="提货时间" width="180" prop="deliveryTime"
            v-if="timeShowArrys.includes(Number(form.activityType))">
            <template #default="scope">
              <el-date-picker v-model="scope.row.deliveryTime" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                style="width: 100%;" type="date" :disabled="disabled" placeholder="选择日期"></el-date-picker>
            </template>
          </el-table-column>
          <!-- <el-table-column label="开团人数" width="180" prop="minJoin" v-if="form.activityType === 2">
            <template #default="scope">
              <el-input size="small" type="number" min="1" :disabled="disabled" v-model="scope.row.minJoin"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="activeTitle" width="180" prop="eachReachNum"
            v-if="form.activityType === 2 && form.groupType !== 10">
            <template #default="scope">
              <el-input size="small" type="number" :disabled="disabled" min="1"
                v-model="scope.row.eachReachNum"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="折扣(%)" width="100" prop="discount"
            v-if="form.activityType === 2 && form.groupType !== 10">
            <template #default="scope">
              <el-input size="small" :disabled="disabled" type="number" :min="0"
                v-model="scope.row.discount"></el-input>
            </template>
          </el-table-column> -->
          <el-table-column fixed="left" label="操作" width="100" v-if="!disabled">
            <template #default="scope">
              <el-button @click="deleteClick(scope.$index, true)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form-item>
    <!--商品选择-->
    <Product :isProduct="isProduct" :islist="islist" :disabledType="true" :productType="form.activityType"
      @closeDialog="closeDialogFunc">
    </Product>
  </div>
</template>

<script>
import Product from "@/components/product/Product.vue";
import { mergeTable } from "@/utils/table.js";
import dayjs from 'dayjs';
export default {
  components: {
    /*选择商品组件*/
    Product
  },
  data() {
    return {
      timeShowArrys: [2, 3],
      /*是否打开选择商品*/
      isProduct: false,
      /*产品去重*/
      excludeIds: [],
      /*是否打开规格选择*/
      isspecs: false,
      /*查询规格当前商品*/
      curProduct: {},
      /*当前的角标索引*/
      curIndex: -1,
      /*选择规格*/
      specType: false,
      /*规格去重*/
      SpecExcludeIds: [],
      /*批量秒杀价*/
      all_seckill_price: null,
      /*批量秒杀库存*/
      all_seckill_stock: null,
      /*批量限购*/
      all_limit_num: null,
      disabled: false,
      formType: 'add',
      islist: true,
      stepList: []
    };
  },
  props: {
    form: Object,
    type: String,
  },
  created() {
    this.disabled = this.$route.query.type === 'view'
    this.formType = this.$route.query.type
    console.log(JSON.stringify(this.form), '----')

  },
  computed: {
    activeTitle() {
      return this.form.groupType === 20 ? '每达成人数' : '每达到数量'
    }
  },
  methods: {
    /*打开添加*/
    changeProduct(list) {
      const codes = [10, 20]
      const gtype = this.form.groupType
      // if (this.form.activityType === 2 &&
      //   codes.includes(gtype)) {
      //   this.islist = false
      // } else {
      //   this.islist = true
      // }

      this.isProduct = true;
    },
    /*关闭弹窗*/
    closeDialogFunc(e) {
      let self = this;
      self.isProduct = false;
      let rowsParasm = e.params
      if (!this.islist) {
        rowsParasm = [e.params]
        self.form.tableData = []
      }
      const tableRows = self.form.tableData
      if (e && e.type == "success") {
        let arr = tableRows
        for (let i = 0; i < rowsParasm.length; i++) {
          let item = rowsParasm[i];
          const model = tableRows.find(f => f.productSkuId === item.productSkuId)
          if (!model) {
            let obj = {
              productName: item.productName,
              seckillProductId: '', //秒杀商品主键id
              productId: item.productId,   //	商品id
              limitNum: item.limitNum, //	限购数量
              stock: item.productStock, //商品库存总量
              sort: item.productSort, //排序
              isDelete: 0, //	是否删除1，是，0否
              seckillActivityId: '', //秒杀活动id
              totalSales: item.salesActual,  //累计销量
              salesInitial: item.salesInitial, //	虚拟销量
              joinNum: 0, //	参与人数
              productSkuId: item.productSkuId,
              color: item.color,
              sku: item.sku,
              seckillPrice: item.productPrice, //	活动价
              seckillStock: item.productStock, //活动库存
              productPrice: item.productPrice, //	产品售价
              stock: item.stockNum, // 库存
              tenThousandPrice: item.tenThousandPrice,
              lakhPrice: item.lakhPrice,
              depositRatio: item.depositRatio,
              discount: 0,//折扣
              batchList: [],
              stepList: [],
              deliveryTime: ''
            };
            arr.push(obj);
          }
        }
        self.form.tableData = arr
      }
    },
    // 新增人数数量折扣

    addStep(productId, index) {
      const $this = this
      if ($this.formType === 'add') {
        $this.form.tableData[index]
          .stepList.push({
            seckillProductId: 0,
            seckillProductBatchId: '',
            seckillActivityId: '',
            productId: productId,
            eachReachNum: '',
            discount: 0
          })
      } else {
        const tableRow = $this.form.tableData[index];
        if (tableRow.stepList.length > 0) {
          const copyItem = JSON.parse(JSON.stringify(tableRow.stepList[0]))
          tableRow.stepList.push({
            seckillProductBatchId: '',
            seckillProductId: copyItem.seckillProductId,
            productId: copyItem.productId,
            seckillActivityId: copyItem.seckillActivityId,
            eachReachNum: '',
            discount: 0

          })
        } else {
          tableRow.stepList.push({
            seckillProductId: 0,
            productId: productId,
            seckillActivityId: '',
            seckillProductBatchId: '',
            eachReachNum: '',
            discount: 0
          })
        }
      }

    },
    //添加批次 
    addBatch(productId, index) {
      const $this = this
      if ($this.formType === 'add') {
        $this.form.tableData[index]
          .batchList.push({
            seckillProductId: 0,
            batchNo: '',
            productId: productId,
            seckillActivityId: '',
            seckillProductBatchId: '',
            batchStock: 0
          })
      } else {
        const tableRow = $this.form.tableData[index];
        if (tableRow.batchList.length > 0) {
          const copyItem = JSON.parse(JSON.stringify(tableRow.batchList[0]))
          tableRow.batchList.push({
            seckillProductBatchId: '',
            seckillProductId: copyItem.seckillProductId,
            batchNo: '',
            productId: copyItem.productId,
            seckillActivityId: copyItem.seckillActivityId,
            batchStock: 0
          })
        } else {
          tableRow.batchList.push({
            seckillProductId: 0,
            batchNo: '',
            productId: productId,
            seckillActivityId: '',
            seckillProductBatchId: '',
            batchStock: 0
          })
        }
      }

    },
    /*删除*/
    deleteClick(e, isType) {
      let curItem = this.form.tableData[e];
      if (curItem.joinNum > 0) {
        ElMessage({
          message: "此商品有人参加活动，无法删除！",
          type: "warning",
        });
        return;
      }
      const defaultTable = this.form.tableData

      this.form.tableData = defaultTable.filter((f, index) => index != e)
    },
    deleteSpec(e, index, pindex) {
      const tableRow = this.form.tableData[pindex]
      if (tableRow) {
        const batchData = tableRow.stepList
        if (batchData && batchData.length > 0) {
          batchData.splice(index, 1)
        }
      }

    },
    deleteBatch(e, index, pindex) {
      const tableRow = this.form.tableData[pindex]
      if (tableRow) {
        const batchData = tableRow.batchList
        if (batchData && batchData.length > 0) {
          batchData.splice(index, 1)
        }
      }

    }

  },
};
</script>

<style lang="scss" scoped>
.spec-min-box {
  position: relative;
}

.spec-min-box>i {
  position: absolute;
  right: 0;
  font-size: 16px;
  cursor: pointer;
}

.spec-min-box .el-icon-close {
  top: 0;
  color: red;
  visibility: hidden;
}

td:hover .spec-min-box .el-icon-close {
  visibility: visible;
}

.spec-min-box .el-icon-caret-right {
  bottom: 0;
  transform: rotate(45deg);
  color: #3a8ee6;
}

.el-form-item.is-error .active-all-set .el-input__inner,
.el-form-item.is-error .isvalid .el-input__inner {
  border-color: #c0c4cc;
}
::v-deep(.el-scrollbar__bar.is-horizontal) {
  height: 20px;          /* 想多粗就写多大 */
}
</style>
